<template>
	<view>
		<view class="topBox">
			<view class="searchBox">
				<image mode="widthFix" class="red_search" src="/static/search.png"></image>
				<view class="optBox">
					<picker @change="bindPickerChange" :value="index" :range="array">{{array[index]}}</picker>
				</view>
				<input class="input" placeholder="搜索车辆型号" :value="value" @input="inpsearch" />
				<view class="searchBtn" @click="searchBtn">搜索</view>
			</view>
		</view>
		<view class="topbg"></view>
		<scroll-view class="tabBox" scroll-x="true">
			<view @click="tabcks(index,item.name)" class="tab" :class="tabindex == index?'tabck':''"
				v-for="(item,index) in cateData" :key="index">
				{{item.name}}
				<text>({{item.count||0}}/{{item.count_total||0}}辆)</text>
			</view>
		</scroll-view>
		<!-- <view class="counts">
			<view>[京]剩<text>{{ajaxdata.jing_count||0}}</text>辆/共<text>{{ajaxdata.jing_count_total||0}}</text>辆</view>
			<view>[粤]剩<text>{{ajaxdata.yue_count||0}}</text>辆/共<text>{{ajaxdata.yue_count_total||0}}</text>辆</view>
		</view> -->
		<view class="listBox">
			<view class="list" v-for="(item, index) in listData" :key="index">
				<view class="name">
					<view class="carname">{{item.pinpai}}</view>
					<!-- <view class="allbtn2" v-if="!showBtn" @click="bianji_info(item.id)">编辑</view> -->
					<view class="allbtn2" v-if="showBtn" @click="bianji_f(item.id)">完成</view>
					<view class="allbtn2" v-if="showBtn" @click="delcar(item.id)">删除该车型</view>
					<view class="allbtn" v-if="!showBtn" @click="caredit(item.id)">添车辆</view>
					<view class="allnum" v-if="!showBtn ">
						剩{{item.shengyu_count}}辆/共{{item.total_count}}辆</view>
				</view>
				<view class="chitemcarno" v-for="(chitem, cindex) in item.child" :key="id">
					<view class="stutic" :class="chitem.status==1?'s1':'s2'" v-if="chitem.status==2">
						已出库</view>
					<view class="stutic" :class="chitem.status==1?'s1':'s2'" v-if="chitem.status==1">未出库</view>
					<view class="chitem_car">{{chitem.chepai}}</view>

					<view @click="carStatus(cindex,index,1)" class="chi_btn" :class="chitem.status==1?'b1':'b2'"
						v-if="chitem.status==2 && !showBtn">一键入库
					</view>
					<view class="chi_btn" @click="carStatus(cindex,index,2)" :class="chitem.status==1?'b1':'b2'"
						v-if="chitem.status==1 && !showBtn">一键出库
					</view>
					<view @click="del(cindex,index)" class="chi_btn3" v-if="showBtn">删除车辆</view>
					<view @click="bianji(cindex,index)" class="chi_btn4" v-if="showBtn">编辑车辆</view>
				</view>
			</view>
			<view v-if="listData.length == 0" class="" style="width: 100%;padding: 260rpx 0 0;text-align: center;">
				<image src="/static/kong.png" style="width: 368rpx;height: 392rpx;margin: auto;" mode=""></image>
			</view>
		</view>
		<view class="fixaddcardbtnbg"></view>
		<view class="fixaddcardbtn0" v-if="!showBtn" @click="bianji_t()">编辑</view>
		<view class="fixaddcardbtn1" v-if="showBtn" @click="bianji_f()">完成</view>
		<view class="fixaddcardbtn" @click="toAdd()">添加车型</view>

		<!-- 弹出 -->
		<view class="tanBg" v-if="showTan"></view>
		<view class="tanBox" v-if="showTan">
			<view class="tanTITLE">手机号验证</view>
			<input type="number" maxlength="11" placeholder="请输入您的手机号" @input="getnumber" />
			<view class="tanBtns" @click="APIlogin()">验证</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTan: true,
				tabindex: 0,
				mobile: '',
				count: 0,
				total_count: 0,
				ajaxdata: [],
				array: ['全部', '已出库', '未出库'],
				listData: [

				],
				tanme: '全部',
				index: 0,
				keyword: '',
				page: 1,
				showBtn: false,
				cateData: '',
			};
		},
		onLoad(e) {
			this.API_catelist()

		},
		onShow() {
			this.keyword = '';
			this.page = 1;
			if (uni.getStorageSync('mobile')) {
				this.showTan = false;
				this.API_dlist();
				this.showBtn = false;
			} else {
				this.showTan = true;
			}
			// this.APIlogin();
		},
		onReachBottom() {
			var that = this;
			var openid = uni.getStorageSync('mobile');
			that.ran
				.request('api/Vehicle/list', {
					openid: openid,
					limit: 10,
					page: that.page + 1,
					keyword: that.keyword,
					status: that.index,
					type: that.tabindex,
				})
				.then(res => {
					if (res.code == 1) {

						if (res.data.list == '') {

							uni.showToast({
								icon: 'none',
								title: '没有更多了~'
							});
						} else {
							that.count = res.data.count;
							that.total_count = res.data.total_count;
							that.ajaxdata = res.data;
							that.listData = [...that.listData, ...res.data.list];
							that.page = that.page + 1;
						}
					}
				});
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			getnumber(e) {
				this.mobile = e.detail.value
			},
			tabcks(id, name) {
				this.tabindex = id;
				this.tanme = name;
				this.page = 1;
				this.listData = [];
				this.API_dlist();
			},
			searchBtn() {
				this.page = 1;
				this.listData = [];
				this.API_dlist();
			},
			inpsearch(e) {
				this.keyword = e.detail.value;

			},
			bianji_f(id) {
				this.showBtn = false;
			},
			bianji_t(id) {
				this.showBtn = true;
			},
			bianji_info(id) {
				uni.navigateTo({
					url: '/pages/index/bianji?id=' + id,
				})
			},
			delcar(id) {
				var that = this;
				var openid = uni.getStorageSync('mobile');
				uni.showModal({
					title: '提示',
					content: '确定删除?',
					success: function(res) {
						if (res.confirm) {
							that.ran
								.request('api/Vehicle/carDelete', {
									openid: openid,
									id: id,
								})
								.then(res => {
									if (res.code == 1) {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										that.page = 1;
										that.listData = [];
										that.API_dlist();
									}
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			bianji(cindex, pindex) {
				var that = this;
				var list = that.listData;
				var plist = list[pindex].child[cindex];
				var id = plist.id;
				uni.navigateTo({
					url: '/pages/index/bianji?id=' + id,
				})
			},
			del(cindex, pindex) {
				var that = this;
				var list = that.listData;
				var plist = list[pindex].child[cindex];
				var id = plist.id;
				var openid = uni.getStorageSync('mobile');
				uni.showModal({
					title: '提示',
					content: '确定删除?',
					success: function(res) {
						if (res.confirm) {
							that.ran
								.request('api/Vehicle/carDelete', {
									openid: openid,
									id: id,
								})
								.then(res => {
									if (res.code == 1) {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										that.page = 1;
										that.listData = [];
										that.API_dlist();
									}
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			carStatus(cindex, pindex, status) {
				var that = this;
				var list = that.listData;
				var plist = list[pindex].child[cindex];
				var chepai = plist.chepai;
				var id = plist.id;
				console.log(plist, pindex, status)
				// （1加，2减）
				var openid = uni.getStorageSync('mobile');
				var info = '';
				if (status == 1) {
					info = '入库'
				} else {
					info = '出库'
				}
				uni.showModal({
					title: '提示',
					content: '确定对' + chepai + '进行' + info + '操作?',
					success: function(res) {
						if (res.confirm) {
							that.ran
								.request('api/Vehicle/carInventory', {
									openid: openid,
									id: id,
									info: status
								})
								.then(res => {
									if (res.code == 1) {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										that.page = 1;
										that.listData = [];
										that.API_dlist();
									}
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})


			},
			caredit(id) {
				uni.navigateTo({
					url: '/pages/index/edit?id=' + id
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/index/add',
				})
			},
			APIlogin() {
				var that = this;
				that.ran
					.request('api/Vehicle/login', {
						mobile: that.mobile,
					})
					.then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							var mobile = uni.setStorageSync('mobile', res.data.mobile);
							that.showTan = false;
							that.API_dlist();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
			},
			API_dlist() {
				var that = this;
				var openid = uni.getStorageSync('openid');
				that.ran
					.request('api/Vehicle/list', {
						openid: openid,
						limit: 10,
						page: that.page,
						keyword: that.keyword,
						status: that.index,
						type: that.tanme,
					})
					.then(res => {
						if (res.code == 1) {
							that.listData = res.data.list;
							that.count = res.data.count;
							that.total_count = res.data.total_count;
							that.ajaxdata = res.data;
						}
					});
			},
			API_catelist() {
				var that = this;
				var openid = uni.getStorageSync('openid');
				that.ran
					.request('api/Vehicle/catelist', {
						openid: openid,
					})
					.then(res => {
						if (res.code == 1) {
							that.cateData = res.data;
						}
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.tanBg {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999999;
	}

	.tanBox {
		width: 500rpx;
		height: 400rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-top: -250rpx;
		margin-left: -250rpx;
		background: #fff;
		border-radius: 20rpx;
		z-index: 99999999;

		.tanBtns:active {
			width: 400rpx;
			background: #0083c5;
			color: #fff;
			text-align: center;
			border-radius: 100rpx;
			line-height: 80rpx;
			margin: 60rpx 50rpx;
		}

		.tanBtns {
			width: 400rpx;
			background: #00aaff;
			color: #fff;
			text-align: center;
			border-radius: 100rpx;
			line-height: 80rpx;
			margin: 60rpx 50rpx;
		}

		.tanTITLE {
			text-align: center;
			line-height: 100rpx;
		}

		input {
			width: 320rpx;
			padding: 0 40rpx;
			border-radius: 100rpx;
			margin: 0 50rpx;
			line-height: 100rpx;
			height: 100rpx;
			background: #eee;
		}
	}

	.tabBox {
		line-height: 80rpx;
		white-space: nowrap;
		width: 100%;
		// overflow: hidden;
		// display: flex;
		background: #fff;
		position: fixed;
		top: 110rpx;
		z-index: 99999999;

		.tab {
			// flex: 1;
			display: inline-block;
			text-align: center;

			color: #666;
			margin: 0 20rpx;
		}

		.tabck {
			display: inline-block;
			color: #00aaff;
			font-weight: bold;
			border-bottom: 2px solid #00aaff;
			box-sizing: border-box;
		}
	}

	.counts {
		line-height: 60rpx;
		font-size: 24rpx;
		color: #666;
		display: flex;

		view {
			flex: 1;
			text-align: center;
		}

		text {
			color: firebrick;
			font-weight: bold;
			padding: 0 4rpx;
		}
	}

	.fixaddcardbtnbg {
		width: 750rpx;
		height: 180rpx;
	}

	.fixaddcardbtn:active {
		background: #0085c7;
	}

	.fixaddcardbtn0:active {
		background: #0085c7;
		color: #fff;
	}

	.fixaddcardbtn1:active {
		background: #cd040d;
		color: #fff;
	}

	.fixaddcardbtn0 {
		width: 180rpx;
		background: #fff;
		color: #00aaff;
		border: 1px solid #00aaff;
		box-sizing: border-box;
		position: fixed;
		right: 75rpx;
		bottom: 60rpx;
		text-align: center;
		border-radius: 100rpx;
		line-height: 90rpx;
	}

	.fixaddcardbtn1 {
		width: 180rpx;
		background: #fff;
		color: #cd040d;
		border: 1px solid #cd040d;
		box-sizing: border-box;
		position: fixed;
		right: 75rpx;
		bottom: 60rpx;
		text-align: center;
		border-radius: 100rpx;
		line-height: 90rpx;
	}

	.fixaddcardbtn {
		width: 400rpx;
		background: #00aaff;
		color: #fff;
		position: fixed;
		right: 275rpx;
		bottom: 60rpx;
		text-align: center;
		border-radius: 100rpx;
		line-height: 90rpx;
	}

	.topbg {
		width: 750rpx;
		height: 200rpx;
	}

	.topBox {
		width: 730rpx;
		padding: 0 0 0 20upx;
		overflow: hidden;
		background: #FFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999;
		border-bottom: 1px solid #ededed;

		.searchBox {
			width: 680upx;
			height: 70upx;
			overflow: hidden;
			background: #EEE;
			border-radius: 40upx;
			padding: 0 0 0 20upx;
			margin: 20upx 0;

			.optBox {
				width: 100upx;
				float: left;
				height: 70upx;
				line-height: 70upx;
				padding: 0 15upx;
			}

			.input {
				width: 300upx;
				float: left;
				height: 70upx;
				line-height: 70upx;
				padding: 0 15upx;
			}

			.searchBtn {
				width: 140upx;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				float: right;
				background: #5b5b5b;
				color: #fff;
			}

			.red_search {
				width: 40upx;
				height: 40upx;
				float: left;
				margin-top: 15upx;
			}

			.searchBtn:active {
				background: #505050;
			}
		}


	}

	.btnBox2 {
		width: 750upx;
		position: fixed;
		bottom: 0;
		height: 100upx;
		background: #fff;
		border-top: 1px solid #ededed;
		overflow: hidden;

		.btn {
			line-height: 80upx;
			background: #cd040d;
			text-align: center;
			width: 40%;
			margin: 10upx 5%;
			color: #fff;
			float: left;
			border-radius: 100upx;
		}

		.btn2 {
			line-height: 80upx;
			background: #fff;
			text-align: center;
			width: 40%;
			margin: 10upx 5%;
			color: #cd040d;
			box-sizing: border-box;
			border: 1px solid #cd040d;
			float: left;
			border-radius: 100upx;
		}
	}

	.listBox {
		width: 750upx;

		.list {
			border-bottom: 1px dotted #ededed;
			overflow: hidden;
			background: #fff;
			border-radius: 14upx;
			position: relative;
			margin: 20upx 20upx 0;
			padding: 10rpx 20upx;

			.name {
				overflow: hidden;

				.carname {
					float: left;
					line-height: 80rpx;
				}

				.allnum {
					float: right;
					font-size: 24rpx;
					color: #666;
					line-height: 80rpx;
				}

				.allbtn2 {
					float: right;
					font-size: 22rpx;
					color: #fff;
					background: #cd040d;
					text-align: center;
					display: inline-block;
					padding: 0 14rpx;
					line-height: 50rpx;
					margin-top: 15rpx;
					margin-left: 20rpx;
					border-radius: 14rpx;
				}

				.allbtn {
					float: right;
					font-size: 22rpx;
					border: 1px solid #999;
					color: #999;
					text-align: center;
					display: inline-block;
					padding: 0 14rpx;
					line-height: 50rpx;
					margin-top: 15rpx;
					margin-left: 20rpx;
					border-radius: 14rpx;
				}
			}

			.chitemcarno {
				margin-top: 10rpx;
				line-height: 100rpx;
				border-radius: 16rpx;
				padding-left: 20rpx;
				background: #f2f2f2;
				overflow: hidden;
				position: relative;

				.chi_btn3 {
					float: right;
					font-size: 22rpx;
					color: #fff;
					background: #cd040d;
					padding: 0 10rpx;
					text-align: center;
					display: inline-block;
					line-height: 90rpx;
					border-radius: 0 14rpx 14rpx 0;
				}

				.chi_btn4 {
					float: right;
					font-size: 22rpx;
					color: #fff;
					background: #00aaff;
					padding: 0 10rpx;
					text-align: center;
					display: inline-block;
					line-height: 90rpx;
					border-radius: 14rpx 0 0 14rpx;
				}

				.chi_btn {
					float: right;
					font-size: 22rpx;

					text-align: center;
					display: inline-block;
					padding: 0 14rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
					border-radius: 14rpx;
				}

				.b1 {
					border: 1px solid #00aaff;
					color: #00aaff;
				}

				.b2 {
					border: 1px solid #cd040d;
					color: #cd040d;
				}

				.stutic {
					position: absolute;
					color: #fff;
					left: -44rpx;
					top: 20rpx;
					padding: 0 50rpx;
					line-height: 30rpx;
					transform: rotate(-45deg);
					font-size: 20rpx;
				}

				.s1 {
					// background: #cd040d;
					background: #00aaff;
				}

				.s2 {
					background: #666;
				}

				.chitem_car {
					float: left;
					margin-left: 50rpx;
				}
			}

			.lft {
				width: 670upx;
				float: left;

				.mx {
					line-height: 50upx;
					font-size: 28upx;
				}

				.time {
					line-height: 50upx;
					color: #999;
					font-size: 24upx;
				}
			}

			.hong {
				color: #cd040d;
			}

			.lv {
				color: #333;
			}

			.jfnums {
				width: 150upx;
				float: right;
				text-align: right;
				line-height: 100upx;
			}
		}

		.listTitle {
			overflow: hidden;
			border-bottom: 1px solid #ededed;

			image {
				width: 40upx;
				float: left;
				margin: 30upx 20upx;
			}

			.tit {
				line-height: 100upx;
				float: left;
			}
		}
	}

	.topbgBox {
		width: 670upx;
		padding: 0 20rpx;
		margin: 20rpx 20rpx 0;

		overflow: hidden;

		.back {
			width: 60upx;
			position: absolute;
			top: 50upx;
			left: 50upx;
		}

		.navs {
			color: #fff;
			line-height: 100upx;
			text-align: center;
			margin-top: 24upx;
			font-weight: bold;
		}

		.fbox {
			height: 110upx;
			padding: 60upx 48upx;
			background: linear-gradient(to left, #d01b1f, #ff1f2e);
			display: flex;
			border-radius: 20rpx;

			.flexs {
				flex: 1;
				font-size: 24upx;
				color: #fff;
				text-align: center;

				.bt {
					font-size: 22upx;
					line-height: 50upx;
					opacity: 0.9;
				}

				.nums {
					font-size: 54upx;
					line-height: 60upx;
				}
			}
		}
	}
</style>